<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="#">WMS</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Outbound</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">{{createEdit}} Truck Load</a>
        </li>
    </ul>
</div>
<div class="container-fluid" style="margin:15px">
    <div class="row">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject bold"> {{createEdit}} Truck Load </span>
                </div>
            </div>
            <div class="portlet-body form form-horizontal">
                <form  novalidate name="truckLoadForm" class="form-horizontal" >
                    <div class="row form-group">
                        <div class="col-md-10">
                            <input-validation-message field="truckLoadNo" form="truckLoadForm"></input-validation-message>
                            <input type="text" name="truckLoadNo" ng-model="truckLoad.truckLoadNo" class="form-control" placeholder="Truck Load No." required/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="portlet light box-shadow-none">
                            <div class="portlet-title">
                                <div class="caption">
                                    <span class="caption-subject bold"> Loads</span>
                                </div>
                                <div class="actions">
                                    <button type="button" ng-click="addLoads()" class="btn blue">add Loads</button>
                                </div>
                            </div>
                            <div class="portlet-body form">
                                <div class="dataTables_wrapper no-footer">
                                    <div class="table-scrollable">
                                        <table class="table table-striped table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Load No.</th>
                                                    <th>Carrier</th>
                                                    <th>Load Type</th>
                                                    <th>Appointment Time</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="load in truckLoad.loadLines">
                                                    <td>{{load.loadNo}}</td>
                                                    <td>{{load.organizations[load.carrierId].name}}</td>
                                                    <td>{{load.type}}</td>
                                                    <td>{{load.appointmentTime}}</td>
                                                    <td style="text-align: center; min-width: 160px">
                                                        <a ng-click="remove($index)">Remove</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="row form-actions right">
                                    <waitting-btn type="submit" btn-class="btn blue" ng-click="truckLoadForm.$valid && save()"
                                                  value="submitLabel" is-loading="loading"></waitting-btn>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
